<template>
  <div class="photo-graph">
    <!-- 轮播 -->
    <banner type="3" />
    <!-- 图片 -->
    <div class="photo-wrap center">
      <div class="tab">
        <span @click="get_hot" :class="{ active: hot }">热门</span>
        <span @click="get_new" :class="{ active: !hot }">更新</span>
      </div>
      <!-- 热门 -->
      <gallery-layout
        v-if="hot"
        :photo_list="hot_list"
        :boxInitRatio="boxInitRatio"
      ></gallery-layout>
      <!-- 更新 -->
      <gallery-layout
        v-else
        :photo_list="new_list"
        :boxInitRatio="boxInitRatio"
      ></gallery-layout>
    </div>
    <footer-layout></footer-layout>
  </div>
</template>

<script>
import Banner from "@/components/common/Banner";
import GalleryLayout from "@/components/common/GalleryLayout";
import FooterLayout from "@/components/common/FooterLayout";

import { get_photo } from "@/api/photo";
export default {
  data() {
    return {
      new_list: [],
      hot_list: [],
      boxInitRatio: 200,
      hot: true,
    };
  },
  components: {
    Banner,
    GalleryLayout,
    FooterLayout,
  },
  created() {
    get_photo(0, 2).then((res) => {
      this.hot_list = res.data.data.photo_list.map((el) => {
        return {
          id: el.photo_id,
          src: el.thumb_w_url_cos,
          loading: true,
          error: false,
          ratio: el.origin_w / el.origin_h,
        };
      });
    });
    get_photo(0, 1).then((res) => {
      this.new_list = res.data.data.photo_list.map((el) => {
        return {
          id: el.photo_id,
          src: el.thumb_w_url_cos,
          loading: true,
          error: false,
          ratio: el.origin_w / el.origin_h,
        };
      });
    });
  },
  methods: {
    get_hot() {
      this.hot = true;
    },
    get_new() {
      this.hot = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.photo-graph {
  .photo-wrap {
    .tab {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      margin: 40px 0;
      span {
        margin: 0 10px;
        cursor: pointer;
        &.active {
          color: $mainColor;
        }
      }
    }
  }
}
</style>
